<template>
  <div class="container">
    <el-form ref="increaseForm" :model="increaseForm" align="left">
      <el-row :gutter="30">
        <el-col :span="12" align="left">
          <div class="grid-content bg-purple">
            <div class="grid-content bg-purple-dark">
              <el-form-item :label="$t('m.page.warehouse')+$t('m.name')+':'" prop="wareHourseId" :label-width="formLabelWidth">
                <el-input show-word-limit v-model="$store.state.basicInfo.warehouseInfo.name" disabled></el-input>
              </el-form-item>
            </div>
          </div>
        </el-col>
        <el-col :span="12" align="left">
          <el-form-item
            :rules="{
      required: true, message: $t('m.choose')+$t('m.page.partition')+$t('m.name'), trigger: 'change'
    }"
            :label="$t('m.page.partition')+$t('m.name')+':'"
            prop="wareHourseAreaId"
            :label-width="formLabelWidth"
          >
            <el-select @change="getWareHourseAreaListen" placeholder v-model="increaseForm.wareHourseAreaId">
              <el-option v-for="(item,index) in warehouseAreaList" :key="index" :label="item.partitionname" :value="item.partitionid"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="el-row" v-for="(oneBlock,blockIndex) in increaseForm.subLocation" :key="blockIndex">
        <el-col :span="5" align="left">
          <el-form-item
            size="mini"
            :label="$t('m.page.region')+$t('m.name')+':'"
            :label-width="formLabelWidth"
            :prop="'subLocation.' + blockIndex + '.areaname'"
            :rules="{
      required: true, message: $t('m.enter')+$t('m.page.region')+$t('m.name'), trigger: 'blur'
    }"
          >
            <el-input maxlength="10" show-word-limit v-model.trim="oneBlock.areaname" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" align="left">
          <el-form-item
            size="mini"
            :label="$t('m.page.region')+$t('m.code')+':'"
            :label-width="formLabelWidth"
            :prop="'subLocation.' + blockIndex + '.areacode'"
            :rules="{
      required: true, message: $t('m.enter')+$t('m.page.region')+$t('m.code'), trigger: 'blur'
    }"
          >
            <el-input maxlength="10" show-word-limit v-model.trim="oneBlock.areacode" placeholder	@input="numCharFunc($event,blockIndex)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" align="left">
          <el-form-item
            size="mini"
            :label="$t('m.charge')+':'"
            :label-width="formLabelWidth"
            :prop="'subLocation.' + blockIndex + '.userList'"
            :rules="{
      required: true, message: $t('m.choose')+$t('m.charge'), trigger: 'change'
    }"
          >
            <el-select multiple collapse-tags placeholder v-model="oneBlock.userList" filterable>
              <el-option v-for="(item) in charger" :key="item.id" :label="item.username" :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" align="left">
          <el-form-item size="mini" :label="$t('m.region.truck')+':'" :label-width="formLabelWidth" :prop="'subLocation.' + blockIndex + '.truckuserList'">
            <el-select multiple collapse-tags placeholder v-model="oneBlock.truckuserList">
              <el-option v-for="(item) in truckList" :key="item.id" :label="item.username" :value="item.id" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" align="right">
          <el-button size="mini" type="primary" @click="openAll(blockIndex)">{{$t('m.region.chooselocaiton')}}</el-button>
          <el-button :disabled="isdisabled" size="mini" @click="reduceArea(blockIndex)">{{$t('m.delete')+$t('m.page.region')}}</el-button>
        </el-col>
        <el-col :span="24">
          <el-row class="locationBlock">
            <el-col :span="24">
              <el-checkbox-group>
                <el-checkbox disabled style="width:140px" v-for="location in oneBlock.checkedLocations" :label="location.locationcode" :key="location.locationid"></el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div align="left">
      <el-button :disabled="isdisabled" size="mini" type="primary" @click="increaseArea">{{$t('m.add')+$t('m.page.region')}}</el-button>
    </div>
    <el-row class="btns">
      <el-button v-if="regionid" type="primary" @click="saveRequest('edit')">{{$t('m.save')}}</el-button>
      <el-button :disabled="isdisabled" v-else type="primary" @click="saveRequest('add')">{{$t('m.save')}}</el-button>
      <el-button type="primary" @click="$router.back(-1)">{{$t('m.back')}}</el-button>
    </el-row>
    <!-- 所有库位dialog开始 -->
    <el-dialog :title="$t('m.region.chooselocaiton')" :visible.sync="visibleAll" width="1000px">
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form size="mini" label-position="right" label-width="120px" :model="formLabelAlign">
            <el-form-item :label="$t('m.location.channel')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.channel"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.shelves')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.shelves"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.level')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.level"></el-input>
            </el-form-item>
            <el-form-item :label="$t('m.location.grating')">
              <el-input maxlength="20" show-word-limit v-model="formLabelAlign.grating"></el-input>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button type="primary" size="mini" @click="search">{{$t('m.query')}}</el-button>
          </div>
        </el-col>
        <el-col :span="18" align="left">
          <!-- 单项已选择的 -->

          <el-button style="margin-bottom:15px" type="primary" size="mini" @click="selectall">{{$t('m.selectall')}}</el-button>
          <el-button style="margin-bottom:15px" type="primary" size="mini" @click="cancelall">{{$t('m.cancel')}}</el-button>
          <el-checkbox-group v-model="alreadyChecked" @change="handleCheckedChange">
            <el-checkbox style="width:140px" v-for="location in locationList" :disabled="otherChecked.includes(location.locationcode)" :label="location.locationcode" :key="location.locationid"></el-checkbox>
          </el-checkbox-group>
          <!-- <h4 style="margin:10px 0">其他区域已选择</h4>
          <el-checkbox-group v-model="otherChecked">
            <el-checkbox
              disabled
              style="width:140px"
              v-for="location in otherCheckedList"
              :label="location.locationcode"
              :key="location.locationid"
            ></el-checkbox>
          </el-checkbox-group>-->
          <h4 style="margin:10px 0">{{$t('m.region.alreadyChecked')}}</h4>
          <el-checkbox-group>
            <el-checkbox disabled style="width:140px" v-for="location in showLocations" :label="location.locationcode" :key="location.locationid"></el-checkbox>
          </el-checkbox-group>
          <el-button v-if="this.checkedLocations.length>8&&!fold" type="text" @click="moreLocation">MORE</el-button>
          <el-button v-if="fold" type="text" @click="foldLocation">FOLD</el-button>
        </el-col>
      </el-row>
      <div class="btns" style="margin-top:30px;">
        <el-button size="mini" type="primary" @click="increaseSubmit">{{$t('m.confirm')}}</el-button>
        <el-button size="mini" @click="closeALLlocation">{{$t('m.cancel')}}</el-button>
      </div>
    </el-dialog>
    <!-- 所有库位dialog结束 -->
  </div>
</template>

<script>
export default {
  name:'',
  props:[''],
  data(){
    return {
      fold:false,
      isselect:true,
      canselect:[],
      request:'',//判断是编辑还是添加
      userList:[], //完整的id+name
      allCheckedList:[], //全部已选locationcode
      locationList:[], //全部区域列表
      allLocationList:[], //保存过滤之前的所有库位
      locationListCode:[], //库位编码
      otherChecked:[], //其他区域已选择库位编码数组
      otherCheckedList:[], //其他区域已选择库位数组
      increaseForm:{
        wareHourseName:'',
        wareHourseId:'',
        wareHourseAreaName:'',
        wareHourseAreaId:'',
        subLocation:[]
      },
      warehouseList:[],
      warehouseAreaList:[],
      charger:[],
      formLabelWidth:'120px',
      checkAll:false,
      alreadyChecked:[], //此库区已选择库位编码数组
      checkedLocations:[], //保存此库区已选库位
      showLocations:[],
      saveLocationCode:[], //点击确定之后，传给页面暂时显示的数据
      checkedAllLocations:[], //全选
      isIndeterminate:true,
      visibleAll:false,
      formLabelAlign:{
        channel:'',
        grating:'',
        level:'',
        shelves:''
      },
      regionid:null,
      wareHourse:'11',
      wareHourseArea:'22',
      wareHourseId:null,
      allLocation:[],
      optionalLocationList:[], //所有可以选的库位
      saveIndex:null,
      checkedVal:[],
      isdisabled:true,
      truckList:[],
      truckuserList:[] //包括状态为0的user
      // truckuserList:[],//保存id
    }
  },
  watch:{
    visibleAll(){
      this.fold=false
      this.formLabelAlign.channel = ''
      this.formLabelAlign.grating = ''
      this.formLabelAlign.level = ''
      this.formLabelAlign.shelves = ''
      this.search()
    }
  },
  methods:{
    numCharFunc(value,index){
      this.increaseForm.subLocation[index].areacode=value.replace(/[^0-9A-Z.]/g,'')
    },
    selectall(){
      this.isselect = false
      let arr = this.alreadyChecked.concat(this.canselect)
      let set = new Set(arr)
      this.alreadyChecked = [...set]
      this.handleCheckedChange(this.alreadyChecked)
    },
    cancelall(){
      this.isselect = true
      this.canselect.forEach(element => {
        this.alreadyChecked.splice(this.alreadyChecked.findIndex(item => item === element),1)
      })
      this.handleCheckedChange(this.alreadyChecked)
    },
    handleCheckedChange(value){
      this.saveLocationCode = value//此区域所有的已选库位
      if (value.length > 0){
        this.checkedLocations = []
        this.allLocationList.forEach(v => {
          this.saveLocationCode.forEach(i => {
            if (v.locationcode == i){
              this.checkedLocations.push(
                {
                  arealocationid:v.arealocationid,
                  locationcode:i,
                  locationid:v.locationid
                }
              )
            }
          })
        })
        this.showLocations=JSON.parse(JSON.stringify(this.checkedLocations))
        if(!this.fold){
          if(this.showLocations.length>8){
            this.showLocations.splice(8)
          }
        }else{
          if(this.showLocations.length<=8){
            this.fold=false
          }
        }
      } else {
        this.fold=false
        this.checkedLocations = []
        this.showLocations=[]
      }
    },
    getWareHourseListen(key){
      this.increaseForm.subLocation = []
      this.increaseForm.wareHourseAreaId = ''
      this.increaseForm.wareHourseName = this.warehouseList.filter(function (
        item
      ){
        return item.warehouseid == key
      })[0].warehousename
      this.increaseForm.wareHourseId = key
      this.getWareHourseArea(key)
    },
    //获取仓库列表
    getwarehouse(){
      this.$axios({
        method:'get',
        url:'/warehouse/list'
      })
        .then(({ data }) => {
          this.warehouseList = data
          if (this.regionid){
            this.wareHourse = this.warehouseList.filter(item => {
              return item.warehouseid == this.wareHourseId
            })[0].warehousename
          }
        })
    },
    getWareHourseArea(key){
      this.$axios({
        method:'get',
        url:`/partition/list/${key}`
      }).then(({ data }) => {
        this.warehouseAreaList = data.list
      })
    },
    //select 选择获取仓库id（key）
    getWareHourseAreaListen(key){
      //this.regionid = key
      this.wareHourseArea = this.warehouseAreaList.filter(v => {
        return v.partitionid === key
      })[0].partitionname
      this.increaseForm.wareHourseAreaId = key
      this.isdisabled = false
      this.increaseForm.subLocation = []
      this.increaseForm.wareHourseAreaName = this.warehouseAreaList.filter(
        item => {
          return item.partitionid == key
        }
      )[0].partitionname
      this.increaseForm.wareHourseAreaId = key
      this.disableValue = false
      //修改标记
      new Promise(resolve => {
        this.editHourseArea(resolve, key)
      }).then(() => {
        this.getLocation(key)
        this.getCharger(this.formatRole)
        this.getTruck(this.formatTruck)
        this.isdisabled = false
      })
      //通过请求接口有没有返回数据，判断是否已经分配过库位
      // this
      //   .$axios({
      //     method: 'get',
      //     url: `/warehousearea/${key}`
      //   })
      //   .then(({data})=> {
      //     let nowList = data
      //     let now = 0
      //     let all = 0
      //     if (data.length > 0){
      //       this.isdisabled = true
      //       //判断有没有新增库位可以分配
      //       this
      //         .$axios({
      //           method: 'get',
      //           url: '/locationinfo/list',
      //           params: {
      //             warehouseid: this.wareHourseId,
      //             partitionid: key,
      //             channel: '',
      //             shelves: '',
      //             level: '',
      //             grating: ''
      //           }
      //         })
      //         .then(({data})=> {
      //           all = data.length
      //           nowList.forEach(v => {
      //             now += v.arealocationList.length
      //           })

      //           if (now != all){
      //             this.$message(this.$t('m.region.notall'))
      //           } else {
      //             this.$message(this.$t('m.region.complete'))
      //           }
      //         })
      //     } else {
      //       this.getLocation(key)
      //     }
      //  })
    },
    //通过id（key）获取全部库位
    getLocation(key){
      let that = this
      that
        .$axios({
          method:'get',
          url:'/locationinfo/list',
          params:{
            warehouseid:that.wareHourseId,
            partitionid:key,
            channel:'',
            shelves:'',
            level:'',
            grating:''
          }
        })
        .then(({ data }) => {
          //判断有没有库位可以分配
          if (data.length > 0){
            // if (!that.regionid) {
            //   that.increaseForm.subLocation.push({
            //     areaid: 0,
            //     arealocationList: [],
            //     areaname: '',
            //     locationnumber: null,
            //     partitionid: that.regionid,
            //     userid: null,
            //     username: '',
            //     warehouseid: that.wareHourseId,
            //     checkedLocations: []
            //   })
            // }
            that.locationList = data
            that.allLocationList = data
            that.locationList.forEach(v => {
              that.locationListCode.push(v.locationcode)
            })
            that.$nextTick(() => {
              that.$refs.increaseForm.clearValidate()
            })
          } else {
            that.isdisabled = true
            that.$message(that.$t('m.region.nolocation'))
          }
        })
    },

    increaseArea(){
      this.$refs['increaseForm'].validate(valid => {
        if (valid){
          let a = 1
          this.increaseForm.subLocation.forEach(v => {
            if (v.arealocationList.length === 0){
              a = 0
              this.$message.error(this.$t('m.choose') + this.$t('m.page.location'))
            }
          })
          if (a === 1){
            this.increaseForm.subLocation.push({
              areaid:0,
              arealocationList:[],
              areaname:'',
              locationnumber:null,
              partitionid:this.regionid || '',
              userid:null,
              username:'',
              warehouseid:this.wareHourseId,
              checkedLocations:[]
            })
            this.$nextTick(() => {
              this.$refs.increaseForm.clearValidate()
            })
          }
        }
      })

    },
    reduceArea(index){
      this.increaseForm.subLocation.splice(index, 1)
    },
    getCharger(callback){
      this.$axios({
        method:'get',
        url:'/user/role/userlist?rolename=库位管理员&status=1'
      }).then(({ data }) => {
        this.charger = data //负责人列表
        callback && callback()
      })
    },
    getTruck(callback){
      this.$axios({
        method:'get',
        url:'/user/role/userlist?status=1'
      }).then(({ data }) => {
        this.truckList = data //叉车负责人列表
        callback && callback()
      })
    },
    increaseSubmit(){
      //点击确定才修改increaseForm里面的值
      //checkbox没点击时，change事件没有触发，导致saveLocationCode是空
      //判断是否点击
      this.increaseForm.subLocation[this.saveIndex].checkedLocations =
        this.increaseForm.subLocation[this.saveIndex].arealocationList = this.checkedLocations
      this.visibleAll = false
    },
    openAll(index){
      this.saveIndex = index
      this.checkedLocations =
        this.increaseForm.subLocation[index].arealocationList
      this.showLocations=JSON.parse(JSON.stringify(this.checkedLocations))
      if(this.showLocations.length>8){
        this.showLocations.splice(8)
      }
      this.alreadyChecked = []
      this.increaseForm.subLocation[index].checkedLocations.forEach(v => {
        this.alreadyChecked.push(v.locationcode)
      })
      this.otherCheckedList = []
      this.otherChecked = []
      this.increaseForm.subLocation.forEach((item, i) => {
        if (i != index){
          item.arealocationList.forEach(element => {
            this.otherCheckedList.push(element)
          })
        }
      })
      this.canselect = JSON.parse(JSON.stringify(this.locationListCode))
      this.otherCheckedList.forEach(item => {
        this.otherChecked.push(item.locationcode)
      })
      this.otherChecked.forEach(e => {
        this.canselect.splice(this.canselect.findIndex(item => item === e), 1)
      })
      this.visibleAll = true
    },
    closeALLlocation(){
      this.visibleAll = false
    },
    editArea(resolve, id){
      this
        .$axios({
          method:'get',
          url:`/warehousearea/${id}`
        }).then(({ data }) => {
          if (data.length > 0){
            this.request = 'edit'
          } else {
            this.request = 'add'
            this.increaseForm.subLocation.push({
              areaid:0,
              arealocationList:[],
              areaname:'',
              locationnumber:null,
              partitionid:this.regionid,
              userid:null,
              username:'',
              warehouseid:this.wareHourseId,
              checkedLocations:[]
            })
            this.$nextTick(() => {
              this.$refs.increaseForm.clearValidate()
            })
          }
        })
    },
    editHourseArea(resolve, id){
      let that = this
      that
        .$axios({
          method:'get',
          url:`/warehousearea/${id}`
        })
        .then(({ data }) => {
          that.increaseForm.subLocation = data
          //判断走添加接口还是编辑接口
          if (data.length > 0){
            that.request = 'edit'
            that.increaseForm.subLocation.forEach(item => {
              item.checkedLocations = item.arealocationList
              // item.arealocationList.forEach(i => {
              //   item.checkedLocations.push(i.locationcode)
              // })
              // 保存的时候对数据进行处理，避免未修改的负责人保存报错
              let idarr = []
              item.userList.forEach(i => {
                idarr.push(i.userid)
                that.userList.push({
                  id:i.userid,
                  username:i.username
                })
              })
              item.userList = idarr

              let idarr2 = []
              item.truckuserList.forEach(i => {
                idarr2.push(i.userid)
                that.truckuserList.push({
                  id:i.userid,
                  username:i.username
                })
              })
              item.truckuserList = idarr2

            })
          } else {
            that.request = 'add'
            that.increaseForm.subLocation.push({
              areaid:0,
              arealocationList:[],
              areaname:'',
              locationnumber:null,
              partitionid:that.regionid,
              userid:null,
              username:'',
              warehouseid:that.wareHourseId,
              checkedLocations:[]
            })
            that.$nextTick(() => {
              that.$refs.increaseForm.clearValidate()
            })
          }

          resolve()
        })
    },
    saveRequest(){
      let that = this
      let message = ''
      let url = ''
      let method = ''
      if (that.request === 'edit'){
        message = that.$t('m.editSuccess')
        url = '/warehousearea/update'
        method = 'put'
      }
      if (that.request === 'add'){
        message = that.$t('m.success')
        url = '/warehousearea/add'
        method = 'post'

      }
      that.increaseForm.subLocation.forEach(v => {
        v.arealocationList.forEach(i => {
          i.areaid = that.increaseForm.wareHourseAreaId
          i.warehouseid = that.increaseForm.wareHourseId
        })
        v.locationnumber = v.arealocationList.length
        v.partitionid = that.increaseForm.wareHourseAreaId
        v.warehouseid = that.$store.state.basicInfo.warehouseInfo.id
      })

      let a = that.allLocationList.length
      let b = 0
      that.increaseForm.subLocation.forEach(item => {
        b += parseInt(item.checkedLocations.length)
      })
      //console.log(that.increaseForm.subLocation)
      that.$refs['increaseForm'].validate(valid => {
        let data = JSON.parse(JSON.stringify(that.increaseForm.subLocation))
        if (valid){
          if (a != b){
            that.$message(that.$t('m.region.uncheck'))
          } else {
            data.map(item => {
              let arr = []
              item.userList.forEach(i => {
                arr.push({
                  id:i,
                  username:that.charger.filter(v => {
                    return v.id == i
                  })[0].username
                })
              })
              item.userList = arr

              let list = []
              item.truckuserList.forEach(i => {
                list.push({
                  id:i,
                  username:that.truckList.filter(v => {
                    return v.id == i
                  })[0].username
                })
              })
              item.truckuserList = list
              return item
            })
            that
              .$axios({
                method:method,
                url,
                data:data
              })
              .then(() => {
                that.$message({
                  showClose:true,
                  message:message,
                  type:'success',
                  duration:1000
                })
                that.$router.back(-1)
              })
          }
        }
      })
    },
    search(){
      let obj = {}
      if (this.regionid){
        obj = {
          warehouseid:this.wareHourseId,
          partitionid:this.regionid,
          channel:this.formLabelAlign.channel,
          shelves:this.formLabelAlign.shelves,
          level:this.formLabelAlign.level,
          grating:this.formLabelAlign.grating
        }
      } else {
        obj = {
          warehouseid:this.increaseForm.wareHourseId,
          partitionid:this.increaseForm.wareHourseAreaId,
          channel:this.formLabelAlign.channel,
          shelves:this.formLabelAlign.shelves,
          level:this.formLabelAlign.level,
          grating:this.formLabelAlign.grating
        }
      }
      this
        .$axios({
          method:'get',
          url:'/locationinfo/list',
          params:obj
        })
        .then(({ data }) => {
          this.locationList = data
          this.canselect = this.locationList.map(v => {
            return v.locationcode
          })
          this.otherChecked.forEach(e => {
            this.canselect.forEach((v, i) => {
              if (v === e){
                // this.locationList.splice(i, 1)
                this.canselect.splice(i, 1)
              }
            })
          })
        })
    },
    formatRole(){
      let roleList = [] // 暂存接口返回的role，并去重
      let idArr = [] // 去重缓存数组

      this.userList.forEach(item => {
        if (!idArr.includes(item.id)){
          idArr.push(item.id)
          roleList.push({ id:item.id, username:item.username })
        }
      })
      for (let i = 0;i < roleList.length;i++){
        let result = this.charger.some(item => {
          return item.id === roleList[i].id
        })
        if (!result)
          this.charger.push(Object.assign({}, roleList[i], { disabled:true }))
      }
    },
    formatTruck(){
      let list = [] // 暂存接口返回的用户，并去重
      let idArr = [] // 去重缓存数组
      this.truckuserList.forEach(item => {
        if (!idArr.includes(item.id)){
          idArr.push(item.id)
          list.push({ id:item.id, username:item.username })
        }
      })
      for (let i = 0;i < list.length;i++){
        let result = this.truckList.some(item => {
          return item.id === list[i].id
        })
        if (!result)
          this.truckList.push(Object.assign({}, list[i], { disabled:true }))
      }
    },
    moreLocation(){
      this.fold=true
      this.showLocations=JSON.parse(JSON.stringify(this.checkedLocations))
    },
    foldLocation(){
      this.fold=false
      this.showLocations.splice(8)
    }
  },
  updated(){ },

  created(){
    this.regionid = this.$route.query.regionid || ''
    this.increaseForm.wareHourseAreaId = this.$route.query.regionid || ''
    this.wareHourseArea = this.$route.query.partitionname
    this.wareHourseId = this.$route.query.id
    // this.getwarehouse()
    this.getWareHourseArea(this.$store.state.basicInfo.warehouseInfo.id)
    if (this.regionid){
      new Promise(resolve => {
        this.editHourseArea(resolve, this.regionid)
      }).then(() => {
        this.getLocation(this.$route.query.regionid)
        this.getCharger(this.formatRole)
        this.getTruck(this.formatTruck)
        this.isdisabled = false
      })
    } else {
      this.getTruck()
      this.getCharger()
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  min-height: 90%;
  max-width: 1500px;
  padding: 30px;
  background: #fff;
}
.el-input,
.el-select {
  width: 100%;
}
.locationBlock {
  margin-bottom: 30px;
  max-height: 95px;
  overflow: hidden;
  overflow-y: scroll;
}
::v-deep.container .el-dialog{
  transform: translateZ(0);
}
</style>